<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组的扩展</title>
  </head>
  <body>
    <script>
      // 1、扩展运算符：三个点 ...
      // const arr = [1, 2, 3];
      // console.log(...arr); // 1 2 3

      // 1.1、用于函数调用
      // function fun(x, y) {
      //   console.log(x + y);
      // }
      // fun(...[1, 3]); // 4

      // 1.2、与正常的函数参数结合使用
      // function fun(a, b, c, d) {
      //   console.log(a, b, c, d);
      // }
      // fun(1, ...[5], 2, ...[8]); // 1 5 2 8

      // 1.3、扩展运算符后面可以放置表达式
      // let res = 1 > 0 ? ['yes'] : ['no'];
      // console.log(...res); // yes

      // 1.4、替代函数的 apply 方法
      // ES5 中的 apply 方法
      // function fun(x, y) {
      //   console.log(x + y);
      // }
      // fun.apply(this, [1, 5]); // 6

      // ES6 中的 扩展运算符，替代 apply 方法
      // function fun(a, b, c) {
      //   console.log((a + b) / c);
      // }
      // fun(...[2, 8, 5]); // 2

      // 2、Array.from() 方法
      // 以下是自己模拟的 一个类数组对象
      // let arrayLike = {
      //   0: 101, // id
      //   1: '张三', // name
      //   2: '男', // sex
      //   3: 20, // age
      //   4: '湖南益阳', // address
      //   length: 5
      // };
      // const arr = Array.from(arrayLike);
      // console.log(arr); // [101, "张三", "男", 20, "湖南益阳"]

      // 如果是属性名为字符串，则不能转换
      // let arrayLike = {
      //   id: 101, // id
      //   name: '张三', // name
      //   sex: '男', // sex
      //   age: 20, // age
      //   address: '湖南益阳', // address
      //   length: 5
      // };
      // const arr = Array.from(arrayLike);
      // console.log(arr); // [undefined, undefined, undefined, undefined, undefined]

      // 3、遍历数组新增的方法：keys()、values()、entries()
      // let arr = ['Vue', 'React', 'Angular'];
      // for (let i of arr.keys()) {
      //   console.log(i); // 输出索引 0 1 2
      // }

      // let arr = ['Vue', 'React', 'Angular'];
      // for (let val of arr.values()) {
      //   console.log(val); // Vue React Angular
      // }

      let arr = ['Vue', 'React', 'Angular'];
      for (let item of arr.entries()) {
        console.log(item); // [0, 'Vue'] [1, 'React'] [2, 'Angular']
      }
    </script>
  </body>
</html>
